import { defineComponent, reactive, ref } from "vue";
import {
  ElForm,
  ElInput,
  ElFormItem,
  ElButton,
  FormInstance,
} from "element-plus";
import { LoginModel } from "@/models/loginModel";
import { messageCof } from "@/utils/message";
import { userStore } from "@/stores/user";
export default defineComponent({
  name: "login",
  setup() {
    const store = userStore();
    const formRef = ref<FormInstance>();
    let ruleForm = reactive<LoginModel>({
      password: "",
      username: "",
    });
    const loginMethods = () => {
      const { password, username } = ruleForm;
      if (!password || !username) {
        messageCof("账号或密码不能为空", "error");
      } else {
        store.userLogin(username, password);
      }
    };
    // 回车登录
    const submitForm = (e: any) => {
      if (e.code == "Enter") {
        loginMethods();
      }
    };
    // 点击登录
    const clickSubmitForm = () => {
      loginMethods();
    };
    return () => (
      <ElForm ref={formRef} model={ruleForm} class="demo-ruleForm">
        <ElFormItem prop="username">
          <ElInput
            size="large"
            placeholder="请输入用户名"
            v-model={ruleForm.username}
            autocomplete="off"
          />
        </ElFormItem>
        <ElFormItem prop="password">
          <ElInput
            show-password
            size="large"
            v-model={ruleForm.password}
            placeholder="请输入密码"
            type="password"
            autocomplete="off"
            onKeydown={(e) => submitForm(e)}
          />
        </ElFormItem>
        <ElFormItem>
          <ElButton
            onClick={() => clickSubmitForm()}
            style={{ width: "100%" }}
            type="primary"
            loading={store.loading}
          >
            登录
          </ElButton>
        </ElFormItem>
      </ElForm>
    );
  },
});
